<template>
  <view class="container">
    <!-- 分类内容区域 -->
    <view class="category-container">
      <!-- 左侧分类菜单 -->
      <scroll-view scroll-y class="category-menu">
        <view 
          v-for="(item, index) in categories" 
          :key="index"
          class="menu-item btn-click"
          :class="{ active: currentCategory === index }"
          @click="selectCategory(index)"
        >
          <text>{{ item.name }}</text>
        </view>
      </scroll-view>
      
      <!-- 右侧商品列表 -->
      <scroll-view 
        scroll-y 
        class="category-content"
        refresher-enabled
        :refresher-triggered="isRefreshing"
        @refresherrefresh="onRefresh"
      >
        <!-- 当前分类标题 -->
        <view class="content-header" v-if="currentCategory !== null">
          <text class="title">{{ currentCategoryName }}</text>
          <text class="sub-title">{{ categories[currentCategory]?.description }}</text>
        </view>
        
        <!-- 商品列表 -->
        <view class="products-grid" v-if="currentCategory !== null">
          <view 
            class="product-card"
            v-for="(product, index) in currentProducts"
            :key="index"
          >
            <image :src="product.image" mode="aspectFill" class="product-image"></image>
            <view class="product-info">
              <view class="text-content">
                <text class="product-name text-ellipsis">{{ product.name }}</text>
                <text class="product-desc text-ellipsis">{{ product.description }}</text>
                <text class="monthly-sales">月售 {{ product.monthlySales }}+</text>
              </view>
              <view class="price-box">
                <view class="current-price">
                  <text class="symbol">¥</text>
                  <text class="price">{{ formatPrice(product.currentPrice) }}</text>
                  <text class="unit">/{{ product.unit }}</text>
                </view>
                <text class="original-price" v-if="product.originalPrice">¥{{ formatPrice(product.originalPrice) }}</text>
              </view>
              <view class="add-cart-btn btn-click" @tap="CardUtil.addCard(product)">
                <text class="iconfont icon-plus"></text>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { onShow } from '@dcloudio/uni-app'
import { ref, reactive, computed } from 'vue'
import { CardUtil } from '../../utils/cartUtils.js'
import { formatPrice } from '../../utils/baseUtils.js'
import { CategoryUtils } from '../../utils/categoryUtils.js'

// 分类数据
const categories = ref([])
// 当前选中的分类索引
const currentCategory = ref(0)
// 是否正在刷新
const isRefreshing = ref(false)

// 如果没有数据就去请求后台
onShow(() => {
	// 重置 CatBar
	CardUtil.initCatBar()
	// 获取分类商品数据
	CategoryUtils.getAll(data => {categories.value = data})
})

// 下拉刷新
const onRefresh = async () => {
  isRefreshing.value = true
  // 模拟刷新数据
  CategoryUtils.reload(data => { 
	  categories.value = data 
	  isRefreshing.value = false
  })
}

// 选择分类
const selectCategory = (index) => {
  if (currentCategory.value === index) return
  currentCategory.value = index
}

// 计算当前分类名称
const currentCategoryName = computed(() => {
  return categories.value[currentCategory.value]?.name || ''
})

// 计算当前分类商品
const currentProducts = computed(() => {
  return categories.value[currentCategory.value]?.products || []
})
</script>

<style lang="scss" scoped>
.container {
  height: 90vh;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  overflow: hidden;
}

.search-box {
  padding: 20rpx 30rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
  flex-shrink: 0;
  
  .search-input-box {
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 32rpx;
    padding: 12rpx 24rpx;
    
    .iconfont {
      font-size: 32rpx;
      color: #999;
      margin-right: 12rpx;
    }
    
    .placeholder {
      font-size: 26rpx;
      color: #999;
    }
  }
}

.category-container {
  flex: 1;
  display: flex;
  overflow: hidden;
  
  .category-menu {
    width: 180rpx;
    height: 100%;
    background-color: #f8f8f8;
    overflow-y: auto;
    flex-shrink: 0;
    
    &::-webkit-scrollbar {
      display: none;
    }
    
    .menu-item {
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      color: #333;
      position: relative;
      transition: all 0.3s;
      
      &.active {
        background-color: #fff;
        color: #ff5062;
        font-weight: bold;
        
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 6rpx;
          height: 36rpx;
          background-color: #ff5062;
          border-radius: 0 4rpx 4rpx 0;
        }
      }
    }
  }
  
  .category-content {
    flex: 1;
    height: 100%;
    background-color: #fff;
    overflow-y: auto;
    
    &::-webkit-scrollbar {
      display: none;
    }
    
    .content-header {
      position: sticky;
      top: 0;
      z-index: 10;
      background: #fff;
      padding: 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1rpx solid #f0f0f0;
      
      .title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }
      
      .sub-title {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .products-grid {
      padding: 20rpx;
      box-sizing: border-box;
      
      .product-card {
        width: 100%;
        margin-bottom: 20rpx;
        background-color: #fff;
        border-radius: 12rpx;
        overflow: hidden;
        box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
        animation: slideIn 0.3s ease-out;
        display: flex;
        
        .product-image {
          width: 200rpx;
          height: 200rpx;
          object-fit: cover;
        }
        
        .product-info {
          flex: 1;
          padding: 20rpx;
          position: relative;
          display: flex;
          flex-direction: column;
          
          .text-content {
            flex: 1;
            margin-bottom: 12rpx;
            
            .product-name {
              font-size: 28rpx;
              font-weight: bold;
              color: #333;
              margin-bottom: 6rpx;
              line-height: 1.4;
              -webkit-line-clamp: 2;
              min-height: 1.4em;
            }
            
            .product-desc {
              font-size: 24rpx;
              color: #999;
              margin-bottom: 6rpx;
              line-height: 1.3;
              -webkit-line-clamp: 1;
            }
            
            .monthly-sales {
              font-size: 22rpx;
              color: #666;
              margin-bottom: 8rpx;
              
              &::before {
                content: '';
                display: inline-block;
                width: 4rpx;
                height: 4rpx;
                background: #666;
                border-radius: 50%;
                margin: 0 6rpx;
                vertical-align: middle;
              }
            }
          }
          
          .text-ellipsis {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
          }
          
          .price-box {
            display: flex;
            align-items: baseline;
            margin-bottom: 0;
            max-width: calc(100% - 80rpx);
            
            .current-price {
              display: flex;
              align-items: baseline;
              max-width: 70%;
              
              .symbol {
                font-size: 20rpx;
                color: #ff5062;
                font-weight: bold;
              }
              
              .price {
                font-size: 26rpx;
                color: #ff5062;
                font-weight: bold;
                margin: 0 2rpx;
                max-width: 120rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              
              .unit {
                font-size: 20rpx;
                color: #999;
              }
            }
            
            .original-price {
              font-size: 20rpx;
              color: #999;
              text-decoration: line-through;
              margin-left: 8rpx;
              max-width: 30%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          
          .add-cart-btn {
            position: absolute;
            right: 16rpx;
            bottom: 16rpx;
            width: 52rpx;
            height: 52rpx;
            background: linear-gradient(135deg, #ff6b81, #ff4757);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4rpx 12rpx rgba(255,75,87,0.2);
            transition: all 0.3s;
            
            .iconfont {
              color: #fff;
              font-size: 28rpx;
            }
            
            &:active {
              transform: scale(0.9);
            }
          }
        }
        
        // 添加渐变动画
        opacity: 0;
        transform: translateX(30rpx);
        animation: slideIn 0.3s ease-out forwards;
        
        @for $i from 1 through 10 {
          &:nth-child(#{$i}) {
            animation-delay: #{$i * 0.05}s;
          }
        }
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx;
  color: #999;
  font-size: 28rpx;
  
  .empty-image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
  }
}

.loading-more {
  text-align: center;
  padding: 20rpx 0;
  color: #999;
  font-size: 24rpx;
}

// 动画
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(30rpx);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

// 添加切换动画
.products-grid {
  transition: opacity 0.3s ease-out;
  
  &.switching {
    opacity: 0;
  }
}
</style> 